<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="./public/booststrap3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="./public/base.css">
</head>
<body ng-app="myApp">
<h2 class="title">AngularJS我的初醒网站</h2>
<!--顶部-->
<div ng-include="'./pages/public/header.html'" class="header"></div>
<!--展示区-->
<div ng-view class="container"></div>
<!--底部区-->
<div ng-include="'./pages/public/footer.html'" class="footer"></div>
</body>
<script src="./public/booststrap3.0/js/jquery-3.2.1.min.js"></script>
<script src="./public/booststrap3.0/js/bootstrap.min.js"></script>
<script src="./public/angular.min.js"></script>
<script src="./public/angular-route.min.js"></script>
<script>
    //地址变量api:为了后续方便维护，凡多重用的尽量统一；
    var urlName=['home','skill','pesources','about'];
    /*路由控制*/
    var app=angular.module("myApp",['ngRoute'])
        .config(['$routeProvider',function ($routeProvider) {
            $routeProvider
                .when('/'+urlName[0],{templateUrl:"./pages/"+urlName[0]+".html",controller:urlName[0]})
                .when('/'+urlName[1],{templateUrl:"./pages/"+urlName[1]+".html",controller:urlName[1]})
                .when('/'+urlName[2],{templateUrl:"./pages/"+urlName[2]+".html",controller:urlName[2]})
                .when('/'+urlName[3],{templateUrl:"./pages/"+urlName[3]+".html",controller:urlName[3]})
                .otherwise({redirectTo:'/'+urlName[0]});
        }]);
    //共享数据：注入：factory
    app.factory("$webSong",function () {
        return{
            name:"宋宇",
            song:{
                age:23,
                job:"webIt"
            }
        }
    });
    /*控制器*/
        //home首页
        app.controller(urlName[0],function ($scope,$webSong) {
            $scope.obj={
                text:"我是首页内容"
            };
            $scope.click_change=function () {
                $scope.obj.text=$webSong.name;
                $webSong.name='123'
            };
            $scope.load=function(){
              alert('home我已经加载完毕了')
            };
        });
        //skill技术
        app.controller(urlName[1],function ($scope,$webSong) {
            $scope.text=$webSong.name;
            $scope.load=function(){
                alert('skill我已经加载完毕了')
            };
        });

        //pesources资源
        app.controller(urlName[2],function ($scope) {
            $scope.obj={
                text:"我是首页内容"
            };
            $scope.load=function(){
                alert('pesources我已经加载完毕了')
            };
        });
        //about关于
        app.controller(urlName[3],function ($scope) {
            $scope.obj={
                text:"我是首页内容"
            };
            $scope.load=function(){
                alert('about我已经加载完毕了')
            };
        });
</script>
</html>